<template>
	<view>
		<!-- 轮播图 -->
		<swiper-banner :swipers="goodsBanner" :height="890" :bool="true"></swiper-banner>
		<!-- 基本内容 -->
		<base-info :detail="detail"></base-info>
		<!-- 滚动属性 -->
		<scroll-attrs :attrs="detail.goodsAttrs"></scroll-attrs>
		<!-- 选择弹窗 -->
		<view class="pop">
			<view class="popup d-flex a-center">
				<view class="list">
					<view class="choosed my-1">
						<text>已选:</text>
						<text>绿色，标配</text>
					</view>
					<view class="run my-2">
						<text>配送:</text>
						<text>北京 东城区 现配</text>
					</view>
					<view class="d-flex a-center  my-1">
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米自营
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米发货
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							七天无理由退货
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDetail
	} from '../../api/index.js'
	var id = '';
	var goodsBanner = ref([])
	var detail = ref([])
	onLoad((e) => {
		console.log('e', e);
		id = e.key
	})
	const getdetail = () => {
		getDetail(id).then(res => {
			console.log('resdetail', res);
			detail.value = res.data
			goodsBanner.value = res.data.goodsBanner

		})
	}
	onMounted(() => {
		getdetail()
	})
</script>
<style scoped lang="scss">
	.pop {
		width: 750rpx;
		height: 300rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.popup {
		width: 100%;
		height: 300rpx;
		background-color: #eee;
	}

	.list {
		margin: 0 0 0 20rpx;
	}

	.pop-height {
		height: 900rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.content image {
		width: 198rpx;
		height: 204rpx;
	}

	.list {
		margin: 0 0 0 20rpx;
	}
</style>